<!--
 * @Author: yehongbo 1394168736@qq.com
 * @Date: 2024-02-20 17:05:38
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-02-27 19:41:19
 * @FilePath: \giteeDownload\testthree\src\views\test7.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- <div id="container">
  </div> -->
</template>

<script setup>
import * as THREE from 'three'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';


// 实例化一个gui对象
const gui = new GUI();
//改变交互界面style属性
gui.domElement.style.right = '0px';
gui.domElement.style.width = '300px';

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 5);

// 创建光源
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);

// 创建GLTF加载器对象
const loader = new GLTFLoader();

loader.load('static/mesh.gltf', function (gltf) {
  console.log("控制台查看加载gltf文件返回的对象结构", gltf);
  console.log("gltf对象场景属性", gltf.scene);
  // 返回的场景对象gltf.scene插入到threejs场景中
  scene.add(gltf.scene);
});
const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshStandardMaterial({
  color: 0x0000ff, //材质颜色
});
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh)
console.log("gltf对象场景属性mesh", mesh);
// 加载 glTF 文件
// 路径设置时无需添加 public/，默认加载 public 文件夹下的图片。
// 不需要使用 require，否则就变成在 src/assets 文件夹寻找。
// loader.load('static/mesh.glb', function (gltf) {
//   // 给加载的模型设置位置和旋转
//   gltf.scene.position.set(0, 0, 0);
//   gltf.scene.rotation.set(0, 0, 0);
//   // 将模型添加到场景
//   scene.add(gltf.scene);
// }, undefined, function (error) {
//   console.error(error);
// });
// 渲染场景
function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);

// // 改变相机观察目标点 camera.lookAt(250, 0, 250);
// 意相机控件OrbitControls会影响lookAt设置，注意手动设置OrbitControls的目标参数
controls.target.set(250, 0, 250)
controls.update()
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change', function () {
  // 浏览器控制台查看相机位置变化
  // console.log('camera.position', camera.position);
  // 渲染循环和相机控件OrbitControls

  // 设置了渲染循环, 相机控件OrbitControls就不用再通过事件change执行renderer.render(scene, camera);，毕竟渲染循环一直在执行renderer.render(scene, camera);。
  // renderer.render(scene, camera); //执行渲染操作
});//监听鼠标、键盘事件



</script>
<style scoped>
#container {
  width: 500px;
  height: 500px;
  margin: 100px auto;
  background: gray;
}
</style>